<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="../resources/js/react.min.js"></script>
    <script src="../resources/js/react-dom.min.js"></script>
    <script src="../resources/js/browser.min.js"></script>
    <script type="text/javascript" src="./js/jquery.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <!--<script type="text/babel" src="js/hello/hello.js"></script>-->

    <a href="example.html" target="_blank" onclick="window.open('example.html', 'popup', 'width=300,height=150'); return false">View Foo</a>

  <script type="text/javascript">
    $( window ).unload(function() {
      return "Handler for .unload() called.";
    });
  </script>
    <link rel="Stylesheet" href="./css/styles.css" />
    <div>
      <input type="text" name="country" id="autocomplete"/>
    </div>

  <script type="text/javascript" src="./js/jquery.autocomplete.js"></script>
    <script type="text/javascript">
      var countries = [
        { value: 'Andorra', data: 'AD' },
        // ...
        { value: 'Zimbabwe', data: 'ZZ' }
      ];

      $('#autocomplete').autocomplete({
        lookup: countries,
        onSelect: function (suggestion) {
          console.log('You selected: ' + suggestion.value + ', ' + suggestion.data);
        }
      });
    </script>
    <style type="text/css">
      @charset "utf-8";
      .pagination a {
        text-decoration: none;
        border: 1px solid #AAE;
        color: #15B;
      }

      .pagination a, .pagination span {
        display: inline-block;
        padding: 0.1em 0.4em;
        margin-right: 5px;
        margin-bottom: 5px;
      }

      .pagination .current {
        background: #26B;
        color: #fff;
        border: 1px solid #AAE;
      }

      .pagination .current.prev, .pagination .current.next{
        color:#999;
        border-color:#999;
        background:#fff;
      }
    </style>
    <div id="Pagination" class="pagination"></div>
  <script type="text/javascript">
    /**
     * This jQuery plugin displays pagination links inside the selected elements.
     *
     * @author Gabriel Birke (birke *at* d-scribe *dot* de)
     * @version 1.2
     * @param {int} maxentries Number of entries to paginate
     * @param {Object} opts Several options (see README for documentation)
     * @return {Object} jQuery Object
     */
    jQuery.fn.pagination = function(maxentries, opts){
      opts = jQuery.extend({
        items_per_page:10,
        num_display_entries:10,
        current_page:0,
        num_edge_entries:0,
        link_to:"#",
        prev_text:"Prev",
        next_text:"Next",
        ellipse_text:"...",
        prev_show_always:true,
        next_show_always:true,
        callback:function(){return false;}
      },opts||{});

      return this.each(function() {
        /**
         * 计算最大分页显示数目
         */
        function numPages() {
          return Math.ceil(maxentries/opts.items_per_page);
        }
        /**
         * 极端分页的起始和结束点，这取决于current_page 和 num_display_entries.
         * @返回 {数组(Array)}
         */
        function getInterval()  {
          var ne_half = Math.ceil(opts.num_display_entries/2);
          var np = numPages();
          var upper_limit = np-opts.num_display_entries;
          var start = current_page>ne_half?Math.max(Math.min(current_page-ne_half, upper_limit), 0):0;
          var end = current_page>ne_half?Math.min(current_page+ne_half, np):Math.min(opts.num_display_entries
                  , np);
          return [start,end];
        }

        /**
         * 分页链接事件处理函数
         * @参数 {int} page_id 为新页码
         */
        function pageSelected(page_id, evt){
          current_page = page_id;
          drawLinks();
          var continuePropagation = opts.callback(page_id, panel);
          if (!continuePropagation) {
            if (evt.stopPropagation) {
              evt.stopPropagation();
            }
            else {
              evt.cancelBubble = true;
            }
          }
          return continuePropagation;
        }

        /**
         * 此函数将分页链接插入到容器元素中
         */
        function drawLinks() {
          panel.empty();
          var interval = getInterval();
          var np = numPages();
          // 这个辅助函数返回一个处理函数调用有着正确page_id的pageSelected。
          var getClickHandler = function(page_id) {
            return function(evt){ return pageSelected(page_id,evt); }
          }
          //辅助函数用来产生一个单链接(如果不是当前页则产生span标签)
          var appendItem = function(page_id, appendopts){
            page_id = page_id<0?0:(page_id<np?page_id:np-1); // 规范page id值
            appendopts = jQuery.extend({text:page_id+1, classes:""}, appendopts||{});
            if(page_id == current_page){
              var lnk = jQuery("<span class='current'>"+(appendopts.text)+"</span>");
            }else{
              var lnk = jQuery("<a>"+(appendopts.text)+"</a>")
                      .bind("click", getClickHandler(page_id))
                      .attr('href', opts.link_to.replace(/__id__/,page_id));
            }
            if(appendopts.classes){lnk.addClass(appendopts.classes);}
            panel.append(lnk);
          }
          // 产生"Previous"-链接
          if(opts.prev_text && (current_page > 0 || opts.prev_show_always)){
            appendItem(current_page-1,{text:opts.prev_text, classes:"prev"});
          }
          // 产生起始点
          if (interval[0] > 0 && opts.num_edge_entries > 0)
          {
            var end = Math.min(opts.num_edge_entries, interval[0]);
            for(var i=0; i<end; i++) {
              appendItem(i);
            }
            if(opts.num_edge_entries < interval[0] && opts.ellipse_text)
            {
              jQuery("<span>"+opts.ellipse_text+"</span>").appendTo(panel);
            }
          }
          // 产生内部的些链接
          for(var i=interval[0]; i<interval[1]; i++) {
            appendItem(i);
          }
          // 产生结束点
          if (interval[1] < np && opts.num_edge_entries > 0)
          {
            if(np-opts.num_edge_entries > interval[1]&& opts.ellipse_text)
            {
              jQuery("<span>"+opts.ellipse_text+"</span>").appendTo(panel);
            }
            var begin = Math.max(np-opts.num_edge_entries, interval[1]);
            for(var i=begin; i<np; i++) {
              appendItem(i);
            }

          }
          // 产生 "Next"-链接
          if(opts.next_text && (current_page < np-1 || opts.next_show_always)){
            appendItem(current_page+1,{text:opts.next_text, classes:"next"});
          }
        }

        //从选项中提取current_page
        var current_page = opts.current_page;
        //创建一个显示条数和每页显示条数值
        maxentries = (!maxentries || maxentries < 0)?1:maxentries;
        opts.items_per_page = (!opts.items_per_page || opts.items_per_page < 0)?1:opts.items_per_page;
        //存储DOM元素，以方便从所有的内部结构中获取
        var panel = jQuery(this);
        // 获得附加功能的元素
        this.selectPage = function(page_id){ pageSelected(page_id);}
        this.prevPage = function(){
          if (current_page > 0) {
            pageSelected(current_page - 1);
            return true;
          }
          else {
            return false;
          }
        }
        this.nextPage = function(){
          if(current_page < numPages()-1) {
            pageSelected(current_page+1);
            return true;
          }
          else {
            return false;
          }
        }
        // 所有初始化完成，绘制链接
        drawLinks();
        // 回调函数
        opts.callback(current_page, this);
      });
    }

    $(function(){
      //这是一个非常简单的demo实例，让列表元素分页显示
      //回调函数的作用是显示对应分页的列表项内容
      //回调函数在用户每次点击分页链接的时候执行
      //参数page_index{int整型}表示当前的索引页
      var initPagination = function() {
        var num_entries = $("#hiddenresult div.result").length;
        // 创建分页
        $("#Pagination").pagination(num_entries, {
          num_edge_entries: 1, //边缘页数
          num_display_entries: 4, //主体页数
          callback: pageselectCallback,
          items_per_page:1 //每页显示1项
        });
      }();

      function pageselectCallback(page_index, jq){
        var new_content = $("#hiddenresult div.result:eq("+page_index+")").clone();
        $("#Searchresult").empty().append(new_content); //装载对应分页的内容
        return false;
      }
    });
  </script>

    <div id="hiddenresult" style="display:none;">
      <div class="result">第1项内容</div>
      <div class="result">第2项内容</div>
      <div class="result">第3项内容</div>
      <div class="result">第4项内容</div>
      <div class="result">第5项内容</div>
      <div class="result">第6项内容</div>
      <div class="result">第7项内容</div>
      <div class="result">第8项内容</div>
    </div>
  </body>
</html>
